<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>注册登录界面</title>
    <link rel="stylesheet" href="./Public/Home/Login/loginreg.css">
    <link href="./Public/Home/Login/css/animate.css" rel="stylesheet">
    <link href="./Public/Home/Login/css/style.min.css" rel="stylesheet">
    <link href="./Public/Home/Login/css/bootstrap.min.css" rel="stylesheet">
        <style>
        .VAPTCHA-init-main {
            display: table;
            width: 100%;
            height: 100%;
            background-color: #eeeeee;
        }
        .VAPTCHA-init-loading {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .VAPTCHA-init-loading>a {
            display: inline-block;
            width: 18px;
            height: 18px;
            border: none;
        }
        .VAPTCHA-init-loading .VAPTCHA-text {
            font-family: sans-serif;
            font-size: 12px;
            color: #cccccc;
            vertical-align: middle;
        }
        #reg-form input{
            margin-top: 10px;
        }
        #login-form input{
            margin-top: 10px;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://v-cn.vaptcha.com/v3.js"></script>
</head>

<body>
    <div class="container" style="width:650px;">
        <div class="form-box">
            <!-- 注册 -->
            <div class="register-box hidden">
                <h1  style="color:#fff;font-family:'Microsoft YaHei';">注 册</h1>
                <form method="" action="" id="reg-form">
                <input type="text" placeholder="用户名" name="account" id="account" value="">
				<input type="text" placeholder="手机号" name="phone" id="phone" value="">
				<input type="text" placeholder="QQ" name="qq" id="qq" value="">
                <input type="email" placeholder="邮箱" name="email" id="email" value="">
                <input type="password" placeholder="密码" name="password" id="password" value="">
                <input type="password" placeholder="确认密码" name="password2" id="password2" value="">
                </form>
	<div id="VAPTCHAContainer" style="width: 300px;height: 36px;">
        <!-- 下面代码为预加载动画代码，仅供参考 -->
        <div class="VAPTCHA-init-main">
            <div class="VAPTCHA-init-loading">
                <a href="/" target="_blank">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px"
                        height="60px" viewBox="0 0 24 30"
                        style="enable-background: new 0 0 50 50; width: 14px; height: 14px; vertical-align: middle"
                        xml:space="preserve">
                        <rect x="0" y="9.22656" width="4" height="12.5469" fill="#CCCCCC">
                            <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0s" dur="0.6s"
                                repeatCount="indefinite"></animate>
                            <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0s" dur="0.6s"
                                repeatCount="indefinite"></animate>
                        </rect>
                        <rect x="10" y="5.22656" width="4" height="20.5469" fill="#CCCCCC">
                            <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.15s" dur="0.6s"
                                repeatCount="indefinite"></animate>
                            <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.15s" dur="0.6s"
                                repeatCount="indefinite"></animate>
                        </rect>
                        <rect x="20" y="8.77344" width="4" height="13.4531" fill="#CCCCCC">
                            <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.3s" dur="0.6s"
                                repeatCount="indefinite"></animate>
                            <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.3s" dur="0.6s"
                                repeatCount="indefinite"></animate>
                        </rect>
                    </svg>
                </a>
                <span class="VAPTCHA-text">Vaptcha Initializing...</span>
            </div>
        </div>
    </div>
                <button id="reg-button">注册</button>
            </div>
            <!-- 登录 -->
            <div class="login-box">
                <h1  style="color:#fff;font-family:'Microsoft YaHei';">登 录</h1>
                <form method="" action="" id="login-form">
                <input type="text" placeholder="用户名" name="account" id="account-login" value="">
                <input type="password" placeholder="密码" name="password" id="password-login" value="">
                </form>
                <button id="login-button">登录</button>
                <br>
                <button style="width:50%" id="retrievePasswordView">忘记密码</button>
                <button style="width:50%;margin-top:10px;" id="index">返回首页</button>
            </div>
        </div>
        <div class="con-box left">
            <h2>欢迎来到<span>博书公益</span></h2>
            <p>赶快注册开启您的<span>公益之旅</span>吧</p>
            <img src="./Public/Home/Login/4.png" alt="">
            <p>已有账号</p>
            <button id="login">去登录</button>
        </div>
        <div class="con-box right">
            <h2>欢迎来到<span>博书公益</span></h2>
            <p>登录网站查看<span>最新信息</span>吧</p>
            <img src="./Public/Home/Login/5.png" alt="">
            <p>没有账号？</p>
            <button id="register">去注册</button>
        </div>
    </div>
    
        <!--消息提示-->
    <script src="./Public/Home/Login/js/bootstrap-notify.min.js"></script>
    <script type="text/javascript" src="./Public/Home/Login/js/lightyear.js"></script>
    <script type="text/javascript" src="./Public/Home/Login/js/main.min.js"></script>
    <script src="./Public/Home/ban.js"></script>
    <script>
        // 要操作到的元素
        let login=document.getElementById('login');
        let register=document.getElementById('register');
        let form_box=document.getElementsByClassName('form-box')[0];
        let register_box=document.getElementsByClassName('register-box')[0];
        let login_box=document.getElementsByClassName('login-box')[0];
        // 去注册按钮点击事件
        register.addEventListener('click',()=>{
            form_box.style.transform='translateX(80%)';
            login_box.classList.add('hidden');
            register_box.classList.remove('hidden');
        })
        // 去登录按钮点击事件
        login.addEventListener('click',()=>{
            form_box.style.transform='translateX(0%)';
            register_box.classList.add('hidden');
            login_box.classList.remove('hidden');
        })
    </script>
    
    <script>
    //注册的手势验证
        vaptcha({
            vid: '5f794d9d51fc91b470bd9d6b',
            mode: 'click',
            scene: 2,
            container: '#VAPTCHAContainer',
            area: 'auto',
        }).then(function (VAPTCHAObj) {
            // 将VAPTCHA验证实例保存到局部变量中
            obj = VAPTCHAObj;
            //保存一份全局的
            window.vobj = VAPTCHAObj;
            // 渲染验证组件
            VAPTCHAObj.render();

            // 验证成功进行后续操作
            VAPTCHAObj.listen('pass', function () {
                serverToken = VAPTCHAObj.getServerToken();

                //向注册表单插入server和token
                $("#reg-form").append("<input type='hidden' id='server' name='server' value='"+serverToken.server+"'>");
                $("#reg-form").append("<input type='hidden' id='token' name='token' value='"+serverToken.token+"'>");

            })
        });
    </script>
    
    <script>
    //登录的，要点击后才跳到手势验证
            vaptcha({
                vid: '5f794d9d51fc91b470bd9d6b',
                mode: 'invisible',
                scene: 1,
                area: 'auto',
            }).then(function (VAPTCHAObj) {
                // 将VAPTCHA验证实例保存到局部变量中
                obj = VAPTCHAObj;
                
                // 验证成功进行后续操作
                VAPTCHAObj.listen('pass', function () {
                    serverToken = VAPTCHAObj.getServerToken();
                    
                    $("#login-form").append("<input type='hidden' name='server' value='"+serverToken.server+"'>");
                    $("#login-form").append("<input type='hidden' name='token' value='"+serverToken.token+"'>");
                    var accountlogin = $("#account-login").val();
                    var passwordlogin = $("#password-login").val();
                    // 点击登录向服务器端接口提交数据
                    $.post('?c=Login&a=login',{"account":accountlogin,"password":passwordlogin,"server":serverToken.server,"token":serverToken.token},function(result){
                            var res = JSON.parse(result);
                            if(res.code==500){
                                lightyear.notify(res.msg, 'danger', 5000, 'mdi mdi-emoticon-happy', 'top', 'center');
                                VAPTCHAObj.reset();
                                $("#password-login").val("");
                            }else if(res.code==200){
                                location.href="?c=User&a=home";
                            }
                    });
                    
                    // $.post('/login', data, function (r) {
                    //     if (r.code == 200) {
                    //         console.log('登录成功')
                    //     } else {
                    //         console.log('登录失败')

                    //         // 账号或密码错误等原因导致登录失败，重置人机验证
                    //         VAPTCHAObj.reset()
                    //     }
                    // })
                });

                // VAPTCHA实例初始化完成后，用户点击登录按钮时执行人机验证
                $('#login-button').on('click', function () {
                    obj.validate();
                });
            });
        </script>
        <script>
            $("#retrievePasswordView").on('click',function(){
                location.href="?c=Login&a=retrievePasswordView";
            });
            $("#index").on('click',function(){
                location.href="./index.php";
            });
            //注册
            $("#reg-button").on('click',function(){
                var account = $("#account").val();
                var phone = $("#phone").val();
                var qq = $("#qq").val();
                var email = $("#email").val();
                var password = $("#password").val();
                var password2 = $("#password2").val();
                var server = $("#server").val();
                var token = $("#token").val();
                if(account=="" || phone=="" || qq=="" || email=="" || password=="" || password2 ==""){
                    lightyear.notify('内容不能有空！', 'danger', 5000, 'mdi mdi-emoticon-happy', 'top', 'center');
                }else{
                    //非空
                    //两次密码输入
                    if(password!=password2){
                        lightyear.notify('两次密码不一致', 'danger', 5000, 'mdi mdi-emoticon-happy', 'top', 'center');
                    }else{
                    //用户名规则 5-20位,以字母开头、可带数字、下划线
                    var account_patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
                    //qq规则 腾讯QQ号从10000开始
                    var qq_patrn=/[1-9][0-9]{4,}/;
                    //手机号规则
                    var phone_patrn=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
                    //邮箱规则
                    var email_patrn=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                    //密码规则 以字母开头，长度在6~18之间，只能包含字母、数字和下划线
                    var password_patrn=/^[a-zA-Z]\w{5,17}$/
                    if(!account_patrn.exec(account)){
                        lightyear.notify('用户名为5-20位！以字母开头、可带数字、下划线', 'danger', 5000, 'mdi mdi-emoticon-happy', 'top', 'center');
                    }else if(!phone_patrn.exec(phone)){
                        lightyear.notify('手机号不合法！', 'danger', 5000, 'mdi mdi-emoticon-happy', 'top', 'center');
                    }else if(!qq_patrn.exec(qq)){
                        lightyear.notify('QQ号不合法！', 'danger', 5000, 'mdi mdi-emoticon-happy', 'top', 'center');
                    }else if(!email_patrn.exec(email)){
                        lightyear.notify('邮箱不合法！', 'danger', 5000, 'mdi mdi-emoticon-happy', 'top', 'center');
                    }else if(!password_patrn.exec(password2)){
                        lightyear.notify('密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线', 'danger', 5000, 'mdi mdi-emoticon-happy', 'top', 'center');
                    }else if(server=="" || token==""){
                        lightyear.notify('未完成安全验证模块，请重试！', 'danger', 5000, 'mdi mdi-emoticon-happy', 'top', 'center');
                        window.vobj.reset();
                    }
                    //执行POST
                    $.post('?c=Login&a=reg',$("#reg-form").serialize(),function(result){
                        var res = JSON.parse(result);
                        if(res.code==500){
                            lightyear.notify(res.msg, 'danger', 5000, 'mdi mdi-emoticon-happy', 'top', 'center');
                            window.vobj.reset();
                        }else if(res.code==200){
                            lightyear.notify('注册成功，快去登陆吧！', 'success', 5000, 'mdi mdi-emoticon-happy', 'top', 'center');
                        }
                    });
                    
                    
                    
                }//两次密码判断else结束
                    
                }//空判断else结束
            });
            
            // $("#aabb").on('click',function(){
            //     window.vobj.reset();
            // });
        </script>
</body>

</html>